<template>
	<view>
		<view @click="showAlert = true" class="text-notice ft16">
			<text>请选择优惠券</text>
			<text class="iconfont iconbtn_arrowr ml20"></text>
		</view>
		<unio2o-modal @closed="showAlert = false" title="选择优惠券" :show="showAlert">
			<view class="pt30">
				<view v-if="isEmpty == true" class="empty-box text-center">
					<image class="empty-img" :src="''"></image>
					<view class="mt30 ft16 text-notice">
						暂无优惠券
					</view>
				</view>
				<view v-else>
					<view class="flex alcenter">
						<view :data-index="0" @click="selectType" :class="selectIndex == 0 ? 'on' :''" class="col2 choose-type ">
							<view class="ft16 text-center">优惠券</view>
							<view class="block mt20"></view>
						</view>
						<view  :data-index="1" @click="selectType" :class="selectIndex == 1 ? 'on' :''"  class="col2 choose-type">
							<view class="ft16 text-center">联盟卡券</view>
							<view class="block mt20"></view>
						</view>
					</view>
					<view class="choose-main pd30" v-if="selectIndex == 0">
						 <view class="mb30">
							 <unio2o-coupon-use :showStore="false"></unio2o-coupon-use>
						 </view>
						 <view class="mb30">
							 <unio2o-coupon-use :showStore="false"></unio2o-coupon-use>
						 </view>
						<view class="mb30">
							 <unio2o-coupon-use :showStore="false"></unio2o-coupon-use>
						</view>
					</view>
					<view class="choose-main pd30" v-else>
						 <view class="mb30">
							 <unio2o-unicard-use :showStore="false"></unio2o-unicard-use>
						 </view>
						 <view class="mb30">
							 <unio2o-unicard-use :showStore="false"></unio2o-unicard-use>
						 </view>
					</view>
					<view class="pd30">
						<view class="coupon-choose-no-use flex center alcenter ft16 ftw600 text-info">不使用优惠券</view>
					</view>
				</view>
			</view>
		</unio2o-modal>
	</view>
</template>

<script>
	import unio2oModal from '@/components/base/modal/modal.vue';
	import unio2oCouponUse from '@/components/module/coupon/use.vue';
	import unio2oUnicardUse from '@/components/module/unicard/mine/use.vue';
	export default{
		props:{
			storeId:{
				type:Number,
				default:0
			},
			catId:{
				type:Number,
				default:0
			}
		},
		components:{
			unio2oModal,
			unio2oCouponUse,
			unio2oUnicardUse
		},
		data(){
			return {
				isEmpty:false,
				showAlert:false,
				selectIndex:0
			}
		},methods:{
			selectType(e){
				let index = parseInt(e.currentTarget.dataset.index);
				this.selectIndex = index;
			}
		}
	}
</script>

<style>
	.choose-main{
		max-height: 800rpx;
		overflow-y: scroll;
	}
	.coupon-choose-no-use{
		width: 100%;
		height: 96rpx;
		border-radius: 48rpx;
		border:2rpx solid #CCCCCC;
		background: #FFFFFF;
	}
	.choose-type{
		height: 80rpx;
		color:#000000;
		position: relative;
	}
	.choose-type .block{
		width:40rpx;
		height:8rpx;
		border-radius:4rpx;
		position: absolute;
		left: calc(50% - 20rpx);
	}
	.choose-type.on{
		color:#FF6D00;
		font-weight: 600;
	}
	.choose-type.on .block{
		background: #FF6D00;
	}
	.coupon-choose-main{
		max-height: 1000rpx;
		overflow-y: scroll;
	}
	.empty-box{
		height: 800rpx;
		width: 100%;
		padding-top: 100rpx;
	}
</style>